<template>
    <body>
        <el-form  label-width="auto" >
            <el-form-item label="用户名">
                <el-input v-model="form.userName" />
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="form.userPass" show-password />
            </el-form-item>
            <el-form-item label="验证码">
                <el-input v-model="form.vailacode" style="width: 150px;"/>&nbsp;
                <el-tag type="success" style="font-size: 25px; height: 30px;" @click="setCode" >{{ form.vcode }}</el-tag>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="login">登录</el-button>
            </el-form-item>
        </el-form>
    </body>
</template>
<script setup lang="ts">
import axios from "axios"
import { ElMessage } from "element-plus";
import { ref, reactive, onMounted } from "vue"
import { useRouter } from "vue-router";

const router = useRouter()

//字段
const form = reactive({
    userName: "",
    userPass: "",
    vcode: "",
    vailacode:""
})


//验证码(纯数字)
const setCode = () => {
    let code = ""
    for (let i = 1; i <=4; i++){
        code+=Math.floor(Math.random()*10)
    }
    form.vcode = code;
}


//登录
const login = () => {
    axios.get("https://localhost:44352/api/User/Login", {
        params: {
            userName: form.userName,
            userPass:form.userPass
        }
    }).then(res => {
        if (res.data.code == 200) {
            ElMessage.success(res.data.message);
            router.push({
                name:"Main"
            })
        } else {
            ElMessage.error(res.data.message)
        }
    })
}

//勾子函数
onMounted(() => {
    setCode();
})

</script>
<style scoped>
@media (min-width: 200px) {
    body {
        display: grid;
        place-items: center;
    }
}
</style>